<script setup>
import { ref, reactive, watch, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { request } from '@/utils'
import moment from 'moment';
import { ElMessage } from 'element-plus'

const page = reactive({
    size: 10,
    page: 1,
    total: 0
})


const datalist = ref([])
const getData = async function () {
    const { data } = await request.get('/user/list', {
        params: {
            page: page.page,
            size: page.size,
            
        }
    })
    datalist.value = data.data.result
    page.total = data.data.total
}



watchEffect(function () {
    getData()
})

const router = useRouter();
const addItem = function () {
    router.push('add')
}

const removeItem = async function (id) {
    const { data } = await request.delete('/user/list' ,{
        data:{id},
    })
    if (data.code === 200) {
        ElMessage.success('删除成功')
        getData();
    }
    

}
const formatDate = function (d, fmt = 'YYYY-MM-DD') {
    return moment(d).format(fmt)
}
</script>

<template>
    <div>
        <el-row>
            <el-col>
                <el-button type="success" icon="Plus" @click="addItem">添加用户</el-button>
            </el-col>
        </el-row>
        <el-table :data="datalist" style="width: 100%" @selection-change="selectItem">
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
            <el-table-column prop="reg_time" label="注册时间" v-slot="{ row }">
                {{ formatDate(row.reg_time) }}
            </el-table-column>
            <el-table-column label="操作" width="120" v-slot="{ row }">
                <el-popconfirm title="确认删除" @confirm="removeItem(row.id)">
                    <template v-slot:reference>
                        <el-button type="danger" size="small" icon="Delete" circle></el-button>
                    </template>
                </el-popconfirm>
            </el-table-column>
        </el-table>
        <el-pagination layout=" prev, pager, next " :total="page.total" v-model:page-size="page.size"
            v-model:current-page="page.page" />
    </div>
</template>
<style >
</style>
